<template>

	<div class="categories">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
			<el-breadcrumb-item>数据报表</el-breadcrumb-item>
		</el-breadcrumb>
	  <div class="box">
		<!--          添加参数按钮-->
		<el-button type="primary" @click="dialogFormVisible = true">添加商品分类</el-button>
  
		<el-dialog title="添加分类" :visible.sync="dialogFormVisible">
		  <el-form :model="form">
			<el-form-item label="分类名称:" :label-width="formLabelWidth">
			  <el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="父级分类:" :label-width="formLabelWidth">
			  <el-cascader
				  :options="options"
				  :props="defaultParams"
				  v-model="value"
				  clearable></el-cascader>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="addList">确 定</el-button>
		  </div>
		</el-dialog>
		<!--          表格-->
		<zk-table
			ref="table"
			:data="tableData"
			:columns="columns"
			:stripe="props.stripe"
			:border="props.border"
			:show-header="props.showHeader"
			:show-summary="props.showSummary"
			:show-row-hover="props.showRowHover"
			:show-index="props.showIndex"
			:tree-type="props.treeType"
			:is-fold="props.isFold"
			:expand-type="props.expandType"
			:selection-type="props.selectionType"
			sum-text="sum"
			index-text="#"
  
  
		>
		  <template slot="action2" scope="scope">
			<i class="el-icon-success"></i>
		  </template>
		  <template slot="cat_level" scope="scope">
			<el-tag type="primary" size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
			<el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
			<el-tag type="danger" size="mini" v-else>三级</el-tag>
		  </template>
		  <template slot="action" scope="scope">
			<el-button type="primary" size="mini" @click="editClick(scope.row)">编辑</el-button>
			<el-button type="danger" size="mini" @click="delClick(scope.row)">删除</el-button>
		  </template>
		</zk-table>
  
  <!--编辑分类-->
		<el-dialog
			title="更新分类名称"
			:visible.sync="dialogVisible"
			width="70%"
			:before-close="handleClose">
		  <el-form :model="form">
			<el-form-item label="分类名称" :label-width="formLabelWidth">
			  <el-input v-model="form.name1" autocomplete="off"></el-input>
			</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
	  <el-button @click="dialogVisible = false">取 消</el-button>
	  <el-button type="primary" @click="editClick2">确 定</el-button>
	</span>
		</el-dialog>
  <!--      分页-->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="5"
			layout="total, sizes, prev, pager, next, jumper"
			:total="options.length">
		</el-pagination>
  
	  </div>
	</div>
  </template>
  
  <script>
  export default {
	name: "categories",
	data() {
	  return {
		dialogTableVisible: false,
		dialogVisible: false,
		dialogFormVisible: false,
		pid: '',
		form: {
		  name: '',
		  name1: '',
		  region: '',
		  date1: '',
		  date2: '',
		  delivery: false,
		  type: [],
		  resource: '',
		  desc: ''
		},
		formLabelWidth: '120px',
		options: [],
		value:[],
		defaultParams: {
		  checkStrictly:true,
		  label: "cat_name",
		  value: "cat_name",
		  children: "children",
		},
		selectedOptions:'',
		props: {
		  stripe: false,
		  border: true,
		  showHeader: true,
		  showSummary: false,
		  showRowHover: true,
		  showIndex: true,
		  treeType: true,
		  isFold: true,
		  expandType: false,
		  selectionType: false,
		  height: "48px"
		},
		columns:[
		  {label: "分类名称", align: "left", prop: "cat_name" },
		  {label: "是否有效", align: "left", prop: "action2",template: "action2",
			type: "template", },
		  {label: "排序", align: "left", prop: "cat_level",template: "cat_level",
			type: "template", },
		  {
			label: "操作",
			align: "center",
			prop: "action",
			template: "action",
			type: "template",
			width: "180px"
		  }
		],
		data: [],
		tableData:[],
		currentPage: 1,
		pageSize: "5",
		pageSum: "",
	  }
	},
	async created() {
	  let res = await this.$http.getParamList({});
	  let res1 =await this.$http.getParamList({pagSum: '1',pagSize: '5'})
	  console.log(res)
	  this.tableData = res1.data.data
	  this.getOptions(res1.data.data)
	},
	methods: {
	  open() {
		this.$prompt('添加动态参数', '动态参数', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
		  inputErrorMessage: '内容为空'
		}).then(({ value }) => {
		  this.$message({
			type: 'success',
			message: '添加成功'
		  });
		  let obj = {name:value}
		  this.tableData.push(obj)
		}).catch(() => {
		  this.$message({
			type: 'info',
			message: '取消输入'
		  });
		});
	  },
	  getOptions(data) {
		let asd = data
		for(let i=0;i<asd.length;i++){
		  if(asd[i].children){
			for(let j=0;j<asd[i].children.length;j++){
			  asd[i].children[j].children=undefined
			}
		  }
		}
		this.options=asd
	  },
	  async addList() {
		this.dialogFormVisible = false
		// console.log(this.value.length,this.form.name)
		// console.log(this.value)
		let res=await this.$http.getParamList({})
		let flag = true;
		res.data.data.forEach((item) => {
		  // console.log(1)
		  if(item.cat_name === this.form.name) {
			this.open3()
			flag = false
		  }
		})
		if(flag) {
		  let pid = '';
		  pid = this.value.length
		  if(this.value.length === 1) {
			res.data.data.forEach((item) => {
			  if(item.cat_name === this.value[0]) {
				pid = item.cat_id
			  }
			})
		  }else if(this.value.length === 2) {
			res.data.data.forEach((item) => {
			  if(item.cat_name === this.value[0]) {
				item.children.forEach((items) => {
				  if(items.cat_name === this.value[1]) {
					pid = items.cat_id
				  }
				})
			  }
			})
		  }
		  await this.$http.postParamList({cat_pid: pid,cat_name: this.form.name,cat_level:this.value.length})
		  this.refreshData()
		}
	  },
	  open3() {
		this.$message({
		  showClose: true,
		  message: '重复',
		  type: 'warning'
		});
	  },
	  handleSizeChange(val) {
		// console.log(`每页 ${val} 条`);
		this.pageSize = "" + val
		this.getTableData()
	  },
	  handleCurrentChange(val) {
		// console.log(`当前页: ${val}`);
		this.pageSum = "" + val
		this.getTableData()
	  },
	  async getTableData() {
		let res = await this.$http.getParamList({pagenum: this.pageSum,pagesize: this.pageSize})
		this.tableData = res.data.data.result
	  },
	  editClick (val) {
		this.dialogVisible = true;
		this.pid = val.cat_id
		this.form.name1 = val.cat_name
	  },
	  async editClick2(val) {
		this.dialogVisible = false;
		let p_name = this.form.name1
		let id = this.pid
		// console.log(id,p_name)
		this.$http.putParamList({id:id,name:p_name})
		this.refreshData()
	  },
	  handleClose(done) {
		this.$confirm('确认关闭？')
			.then(_ => {
			  done();
			})
			.catch(_ => {});
	  },
	  async delClick(val) {
		let id = val.cat_id
		this.$http.delParamList(id)
		this.refreshData()
	  },
	  async refreshData() {
		let res1 = await this.$http.getParamList({})
		this.getOptions(res1.data.data)
		this.getTableData()
	  }
  
	}
  }
  </script>
  
  <style scoped lang="scss">
	.categories {
	  .box {
		width: 95%;
		height: 60%;
		border: 1px solid #ccc;
		padding: 20px;
		box-shadow: 0px 0px 10px 5px #ddd;
		margin: 0 auto;
		.el-button {
		  margin: 20px 0;
		}
		.el-dialog {
		  text-align: left;
		  .el-cascader--medium{
			width:100%;
		  }
		}
		.zk-table {
		  .el-icon-success {
			color: lime;
		  }
		  .el-button {
			margin: 0 5px;
		  }
		}
	  }
	}
  </style>